<template>
  <div>
    <div id="HtMapZS" :style="{height:offsetheight+'px'}"></div>
    <div ref="GridMsg" class="GridInfoClass">
      <h2 style="text-align: center">{{infoWindowObject.name}}</h2>
      <div class="detail" v-if="infoWindowObject.grade !== 3">
        <div v-if="infoWindowObject.grade === '5.5'">
          <div v-if="parseInt(infoWindowObject.grade) < 3">
            区：{{infoWindowObject.area_name}}
          </div>
          <div v-if="parseInt(infoWindowObject.grade) < 4">
            街道：{{infoWindowObject.street_name}}
          </div>
          <div v-if="parseInt(infoWindowObject.grade) < 5">
            社区：{{infoWindowObject.community_name}}
          </div>
        </div>
        <div v-if="infoWindowObject.grade === '6'">
          <div>
            区：{{infoWindowObject.area_name}}
          </div>
          <div>
            街道：{{infoWindowObject.street_name}}
          </div>
          <div>
            社区：{{infoWindowObject.community_name}}
          </div>
          <div>
            小区：{{infoWindowObject.residential_name}}
          </div>
        </div>
        <Button @click="clickLabelModel" size="small" style="width: 85%" v-if="parseInt(infoWindowObject.grade) === 7" type="primary">查看详情</Button>
      </div>
    </div>
    <label-info ref="labelInfo"></label-info>
    <!--    场所Modal-->
    <Modal v-model="placeModal.show" width="1000">
      <p slot="header" style="text-align:left">
        <span style="font-size: 18px">{{ placeModal.info.name }}</span>
      </p>
      <Row>
        <Col span="17">
          <div class="divtitleClass">场所信息：</div>
          <div style="padding-left: 20px;font-size: 14px">
            <div>场所唯一信用代码：{{placeModal.info.place_tyshxydm}}</div>
            <div>场所地址：{{placeModal.info.place_address}}</div>
            <div>场所成立日期：{{placeModal.info.place_cl_time}}</div>
            <div>场所营业时间：{{placeModal.info.place_time_begin}} -{{placeModal.info.place_time_end}}</div>
            <div>场所描述：{{placeModal.info.place_remarks}}</div>
          </div>
          <div class="divtitleClass">负责人信息：</div>
          <div style="padding-left: 20px;font-size: 14px">
            <div>负责人姓名：{{placeModal.info.place_fzr}}</div>
            <div>负责人电话：{{placeModal.info.place_fzr_phone}}</div>
          </div>
        </Col>
        <Col span="1"></Col>
        <Col span="6">
          <Card style="width: 100%">
            <div>
              <div
                  v-if="placeModal.show && placeModal.info.place_img_list.length >0"
                  style="text-align: center;margin-bottom: 20px;margin-top: 20px"
              >
                <Carousel v-model="place_value">
                  <CarouselItem v-for="(item,index) in placeModal.info.place_img_list" :key="index">
                    <img :src="item" width="100%" />
                  </CarouselItem>
                </Carousel>
              </div>
              <div>所属区域：{{placeModal.info.area_name}}</div>
              <div>所属街道：{{placeModal.info.street_name}}</div>
              <div>所属社区：{{placeModal.info.community_name}}</div>
              <div>所属网格：{{placeModal.info.garden_name}}</div>
              <div>场所面积：{{placeModal.info.place_area}}㎡</div>
            </div>
          </Card>
        </Col>
      </Row>
    </Modal>
    <!--    社会组织Modal-->
    <Modal v-model="societyModal.show" width="1000">
      <p slot="header" style="text-align:left">
        <span style="font-size: 18px">{{ societyModal.info.name }}</span>
      </p>
      <Row>
        <Col span="17">
          <div class="divtitleClass">社会组织信息：</div>
          <div style="padding-left: 20px;font-size: 14px">
            <div>社会组织唯一信用代码：{{societyModal.info.tyshxydm}}</div>
            <div>发证机关：{{societyModal.info.fzjg}}</div>
            <div>社会组织地址：{{societyModal.info.address}}</div>
            <div>社会组织描述：{{societyModal.info.remarks}}</div>
          </div>
          <div class="divtitleClass">法人信息：</div>
          <div style="padding-left: 20px;font-size: 14px">
            <div>法人姓名：{{societyModal.info.fr_name}}</div>
            <div>法人身份证号：{{societyModal.info.TMcardno}}</div>
            <div>法人电话：{{societyModal.info.fr_phone}}</div>
          </div>
        </Col>
        <Col span="1"></Col>
        <Col span="6">
          <Card style="width: 100%">
            <div>
              <div
                  v-if="societyModal.show && societyModal.info.shzz_img_list.length > 0"
                  style="text-align: center;margin-bottom: 20px;margin-top: 20px"
              >
                <Carousel v-model="society_value">
                  <CarouselItem
                      v-for="(item,index) in societyModal.info.shzz_img_list"
                      :key="index"
                  >
                    <img :src="item" width="100%" />
                  </CarouselItem>
                </Carousel>
              </div>
              <div>所属区域：{{societyModal.info.area_name}}</div>
              <div>所属街道：{{societyModal.info.street_name}}</div>
              <div>所属社区：{{societyModal.info.community_name}}</div>
              <div>所属网格：{{societyModal.info.garden_name}}</div>
              <div>场所面积：{{societyModal.info.shzz_area}}㎡</div>
            </div>
          </Card>
        </Col>
      </Row>
    </Modal>
    <!--    物件Modal-->
    <Modal v-model="substanceModal.show" width="1000">
      <p slot="header" style="text-align:left">
        <span style="font-size: 18px">{{ substanceModal.info.name }}</span>
      </p>
      <Row>
        <Col span="17">
          <div class="divtitleClass">物件信息：</div>
          <div style="padding-left: 20px;font-size: 14px">
            <div>物件编码：{{substanceModal.info.wj_code}}</div>
            <div>物件地址：{{substanceModal.info.wj_address}}</div>
            <div>物件描述：{{substanceModal.info.remark}}</div>
          </div>
          <div class="divtitleClass">负责人信息：</div>
          <div style="padding-left: 20px;font-size: 14px">
            <div>负责人姓名：{{substanceModal.info.wj_fzr}}</div>
            <div>负责人电话：{{substanceModal.info.wj_fzr_phone}}</div>
          </div>
        </Col>
        <Col span="1"></Col>
        <Col span="6">
          <Card style="width: 100%">
            <div>
              <div
                  v-if="substanceModal.show && substanceModal.info.wj_img_list.length > 0"
                  style="text-align: center;margin-bottom: 20px;margin-top: 20px"
              >
                <Carousel v-model="substance_value">
                  <CarouselItem
                      v-for="(item,index) in substanceModal.info.wj_img_list"
                      :key="index"
                  >
                    <img :src="item" width="100%" />
                  </CarouselItem>
                </Carousel>
              </div>
              <div>所属区域：{{substanceModal.info.area_name}}</div>
              <div>所属街道：{{substanceModal.info.street_name}}</div>
              <div>所属社区：{{substanceModal.info.community_name}}</div>
              <div>所属网格：{{substanceModal.info.garden_name}}</div>
            </div>
          </Card>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>

import {
  HTautoCenterTwo,
  HTgetCenter,
  HTgetZoom
} from '../../libs/HT-map-Util'
import {
  findBuildingLabelByMapList, newfindAreaList,
  newFindBuildingByMapList,
  newFindGardenByMapList,
  newFindResidentialByMapList,
  newGetGridInfoByID,
  newGetGridInfoByPolygon
} from '../../api/z-new-grid'
import LabelInfo from '../new-grid-view/new-grid-display/label-info'
import { mapHTUrl } from '../../libs/mapTypeUtil'
export default {
  name: 'htMap',
  components: { LabelInfo },
  props: {
    choiceInfo: {
      type: Object
    },
    typeCheckBox: {
      type: Array
    },
    mapViewMode: {
      type: Boolean
    },
    yQmapViewMode: {
      type: Boolean
    },
    placeList: {
      type: Array
    },
    societyList: {
      type: Array
    },
    substanceList: {
      type: Array
    }
  },
  data () {
    return {
      offsetheight: document.documentElement.clientHeight - 145,
      // url: 'http://124.95.134.62:8195/portalproxy/8yxaiziw/iserver/services/map-agscache-TuCeng/rest/maps/%E5%9B%BE%E5%B1%82?key=hvLjfz41XGTXMqg5XJA0RllL',
      // url: 'http://59.197.228.131:8195/portalproxy/8ip34l19/iserver/services/map-ErWeiDiTu11-24/rest/maps/%E4%BA%8C%E7%BB%B4%E5%BA%95%E5%9B%BE2022.11.17?key=BaNmpRn9Ur8aFRBnfRrZYg3v',
      // url: 'http://59.197.228.131:8195/portalproxy/m3cw1qye/iserver/services/map-ErWeiDiTu20221124/rest/maps/%E4%BA%8C%E7%BB%B4%E5%BA%95%E5%9B%BE20221124?key=y5Hd3UxzzhxSu91T8VM9LY9A',
      // url: 'https://ztcmap.tripln.top/portalproxy/2qnzt9re/iserver/services/map-ugcv5-ShenYangPeiTu/rest/maps/%E6%B2%88%E9%98%B3%E9%85%8D%E5%9B%BE?key=ftrH5IEH3GXpHCRJRI2K5lYV',
      url: mapHTUrl(),
      // building_img: 'http://imgdl.tripln.top/webhdfs/v1/grid/label/label1656581442195_3347685345.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0',
      building_img: 'http://xoss.shengshitong.com/csc/grid/icon/loufang.png?Expires=16966717051&OSSAccessKeyId=3uis5f1SEEqE6Aig&Signature=z%2FqKkSRzZLnKLhvtvHkwypx1ilo%3D',
      yQbuilding_img: 'http://imgdl.tripln.top/webhdfs/v1/grid/label/label1663575142189_6512020334.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0',
      areaColor: ['#D2691E', '#0000E3', '#A52A2A', '#FFE4C4', '#FFB6C1', '#556B2F', '#00FFFF', '#BC8F8F', '#4169E1', '#B0E0E6', '#FFF5EE', '#4682B4', '#9ACD32'],
      map: null,
      centerMarker: '',
      areaPolygon: {},
      residentialPolygon: {},
      gardenPolygon: {},
      buildingMarker: {},
      placeMarker: {},
      societyMarker: {},
      substanceMarker: {},
      infoWindowObject: {},
      zoom: 0,
      placeModal: {
        show: false,
        info: {}
      },
      // 社会组织Modal
      societyModal: {
        show: false,
        info: {}
      },
      // 物件Modal
      substanceModal: {
        show: false,
        info: {}
      },
      // 场所轮播index
      place_value: 0,
      // 社会组织轮播index
      society_value: 0,
      // 物件轮播index
      substance_value: 0
    }
  },
  methods: {
    init () {
      let _this = this
      setTimeout(function () {
        _this.initMap()
      }, 1000)
    },
    initMap () {
      this.map = L.map('HtMapZS', {
        crs: L.CRS.EPSG4326,
        preferCanvas: true,
        center: HTgetCenter(this.choiceInfo, this),
        maxZoom: 18,
        minZoom: 9,
        zoom: 3,
        logoControl: false
      })
      this.map.on('zoomend', (e) => {
        let zoom = e.target.getZoom()
        console.log(zoom)
        this.zoom = zoom > 18 ? 18 : zoom
        console.log(this.zoom)
      })
      L.supermap.tiledMapLayer(this.url).addTo(this.map)
      this.showMapView()
    },
    showMapView () {
      this.mapLayerGroup()
      switch (this.choiceInfo.grade) {
        case '2':
          this.map.setView(HTgetCenter(this.choiceInfo, this), HTgetZoom(this.choiceInfo))
          this.createMaker(HTgetCenter(this.choiceInfo, this))
          this.newFindAreaList()
          break
        case '3':
          this.map.setView(HTgetCenter(this.choiceInfo, this), HTgetZoom(this.choiceInfo))
          this.createMaker(HTgetCenter(this.choiceInfo, this))
          if (this.typeCheckBox.length === 1) {
            if (this.typeCheckBox[0] === 'residential') this.newFindResidentialList()
            if (this.typeCheckBox[0] === 'garden') this.newFindGardenList()
          }
          if (this.typeCheckBox.length === 2) {
            this.newFindResidentialList()
            this.newFindGardenList()
          }
          break
        case '4':
          this.map.setView(HTgetCenter(this.choiceInfo, this), HTgetZoom(this.choiceInfo))
          this.createMaker(HTgetCenter(this.choiceInfo, this))
          if (this.typeCheckBox.length === 1) {
            if (this.typeCheckBox[0] === 'residential') this.newFindResidentialList()
            if (this.typeCheckBox[0] === 'garden') this.newFindGardenList()
          }
          if (this.typeCheckBox.length === 2) {
            this.newFindResidentialList()
            this.newFindGardenList()
          }
          break
        case '5':
          this.map.setView(HTgetCenter(this.choiceInfo, this), HTgetZoom(this.choiceInfo))
          this.createMaker(HTgetCenter(this.choiceInfo, this))
          if (this.typeCheckBox.length === 1) {
            if (this.typeCheckBox[0] === 'residential') this.newFindResidentialList()
            if (this.typeCheckBox[0] === 'garden') this.newFindGardenList()
          }
          if (this.typeCheckBox.length === 2) {
            this.newFindResidentialList()
            this.newFindGardenList()
          }
          if (this.yQmapViewMode) {
            this.newFindBuildingListForYQ()
          } else {
            this.newFindBuildingList()
          }
          break
        case '5.5':
          this.createMaker(HTautoCenterTwo(this.choiceInfo.csc_mapjson_ht, this))
          this.map.setView(HTautoCenterTwo(this.choiceInfo.csc_mapjson_ht, this), HTgetZoom(this.choiceInfo))
          if (this.typeCheckBox.length === 1) {
            if (this.typeCheckBox[0] === 'residential') this.newFindResidentialList()
            if (this.typeCheckBox[0] === 'garden') this.newFindGardenList()
          }
          if (this.typeCheckBox.length === 2) {
            this.newFindResidentialList()
            this.newFindGardenList()
          }
          if (this.yQmapViewMode) {
            this.newFindBuildingListForYQ()
          } else {
            this.newFindBuildingList()
          }
          break
        case '6':
          // console.log(this.choiceInfo)
          // console.log(HTautoCenterTwo(this.choiceInfo.csc_mapjson_ht, this))
          this.createMaker(HTautoCenterTwo(this.choiceInfo.csc_mapjson_ht, this))
          this.map.setView(HTautoCenterTwo(this.choiceInfo.csc_mapjson_ht, this), HTgetZoom(this.choiceInfo))
          this.newFindGardenList()
          if (this.yQmapViewMode) {
            this.newFindBuildingListForYQ()
          } else {
            this.newFindBuildingList()
          }
          break
      }
    },
    mapLayerGroup () {
      if (this.centerMarker._leaflet_id !== undefined) {
        this.centerMarker.remove()
      }
      if (this.residentialPolygon !== '') {
        this.map.removeLayer(this.residentialPolygon)
      }
      if (this.gardenPolygon !== '') {
        this.map.removeLayer(this.gardenPolygon)
      }
      if (this.buildingMarker !== '') {
        this.map.removeLayer(this.buildingMarker)
      }
      if (this.areaPolygon !== '') {
        this.map.removeLayer(this.areaPolygon)
      }
      if (this.choiceInfo.grade === '2') {
        this.areaPolygon = L.layerGroup().addTo(this.map)
      }
      this.residentialPolygon = L.layerGroup().setZIndex(3000).addTo(this.map)
      this.gardenPolygon = L.layerGroup().setZIndex(2000).addTo(this.map)
      this.buildingMarker = L.layerGroup().setZIndex(1000).addTo(this.map)
      // console.log(this.residentialPolygon.getZIndex())
    },
    createMaker (latlng) {
      const greenIcon = L.icon({
        iconUrl: 'https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',
        iconSize: [25, 40]
      })
      console.log(greenIcon)
      // HTgetCenter(this.choiceInfo, this)
      this.centerMarker = L.marker(latlng, {}).addTo(this.map)
      this.centerMarker.on('click ', function (e2) {
        console.log(e2)
      })
    },
    createResidentialPolygon (lnglat, item) {
      var ResidentialPolygon = L.polygon(lnglat, { weight: 3, color: '#FF1493', smoothFactor: 0.5, opacity: 1, fillOpacity: 0.3, gridData: item }).addTo(this.residentialPolygon).bringToBack()
      let _this = this
      ResidentialPolygon.on('click ', function (e) {
        let data = e.target.options.gridData
        data.type = 'residential'
        newGetGridInfoByPolygon(data).then(ret => {
          if (ret.data.errcode === 0) {
            _this.infoWindowObject = ret.data.data
            ResidentialPolygon.bindPopup(_this.$refs.GridMsg).openPopup(e.latlng)
          } else {
            this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
          }
        })
      })
    },
    createGardenPolygon (lnglat, item) {
      var GardenPolygon = L.polygon(lnglat, { weight: 3, color: '#3CB371', smoothFactor: 0.5, opacity: 1, fillOpacity: 0.3, gridData: item }).addTo(this.gardenPolygon)
      let _this = this
      GardenPolygon.on('click ', function (e) {
        let data = e.target.options.gridData
        data.type = 'garden'
        newGetGridInfoByPolygon(data).then(ret => {
          if (ret.data.errcode === 0) {
            _this.infoWindowObject = ret.data.data
            GardenPolygon.bindPopup(_this.$refs.GridMsg).openPopup(e.latlng)
          } else {
            this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
          }
        })
      })
    },
    createBuildingMaker (lnglat, item) {
      // console
      const greenIcon = L.icon({
        iconUrl: this.yQmapViewMode === true ? this.yQbuilding_img : this.building_img,
        iconSize: [20, 20]
      })
      var BuildingMarker = L.marker([lnglat.split(',')[0], lnglat.split(',')[1]], { icon: greenIcon, gridData: item }).addTo(this.buildingMarker)
      let _this = this
      BuildingMarker.on('click ', function (e) {
        let data = e.target.options.gridData
        console.log(data)
        newGetGridInfoByID(data).then(ret => {
          if (ret.data.errcode === 0) {
            _this.infoWindowObject = ret.data.data
            console.log(_this.infoWindowObject)
            BuildingMarker.bindPopup(_this.$refs.GridMsg).openPopup(e.latlng)
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      })
    },
    newFindResidentialList () {
      let data = {
        grade: this.choiceInfo.grade,
        id: this.choiceInfo.id
      }
      newFindResidentialByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          result.forEach((item, index) => {
            try {
              this.createResidentialPolygon(JSON.parse(item.csc_mapjson_ht), item)
            } catch (e) {
              console.log(e, item.id, index)
            }
          })
        } else {
          this.$Notice.error({ title: '查询小区失败！', desc: ret.data.errmsg })
        }
      })
    },
    newFindGardenList () {
      let data = {
        grade: this.choiceInfo.grade,
        id: this.choiceInfo.id
      }
      newFindGardenByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          // console.log(result.length)
          result.forEach((item, index) => {
            try {
              this.createGardenPolygon(JSON.parse(item.csc_mapjson_ht), item)
            } catch (e) {
              console.log(e, item.id, index)
            }
          })
        } else {
          this.$Notice.error({ title: '查询网格失败！', desc: ret.data.errmsg })
        }
      })
    },
    newFindBuildingList () {
      let data = {
        grade: this.choiceInfo.grade,
        id: this.choiceInfo.id
      }
      newFindBuildingByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          result.forEach(item => {
            if (item.csc_mapjson_ht) {
              this.createBuildingMaker(item.csc_mapjson_ht, item)
            }
          })
        } else {
          this.$Notice.error({ title: '查询网格失败！', desc: ret.data.errmsg })
        }
      })
    },
    newFindBuildingListForYQ () {
      this.$Message.loading({
        content: '数据查询中',
        duration: 0
      })
      let data = {
        grade: this.choiceInfo.grade,
        id: this.choiceInfo.id
      }
      findBuildingLabelByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          result.forEach(item => {
            if (item.csc_mapjson) {
              this.createBuildingMaker(item.csc_mapjson_ht, item)
            }
          })
          this.$Message.destroy()
        } else {
          this.$Notice.error({ title: '查询网格失败！', desc: ret.data.errmsg })
        }
      })
    },
    newFindAreaList () {
      newfindAreaList().then(ret => {
        if (ret.data.errcode === 0) {
          let data = ret.data.data
          if (data.length > 0) {
            data.forEach((item, index) => {
              if (item.company_scope_ht) {
                if (item.code === 'LM00007') {
                  let dataRes = item.company_scope_ht.split('-')
                  dataRes.forEach(itemRes => {
                    var yhareaPolygon = L.polygon(JSON.parse(itemRes), { color: this.areaColor[index], smoothFactor: 0.5, opacity: 1, fillOpacity: 0.3, gridData: item }).addTo(this.areaPolygon).bringToBack()
                    let _this = this
                    yhareaPolygon.on('click ', function (e) {
                      let data = e.target.options.gridData
                      console.log(data)
                      newGetGridInfoByID(data).then(ret => {
                        if (ret.data.errcode === 0) {
                          _this.infoWindowObject = ret.data.data
                          console.log(_this.infoWindowObject)
                          yhareaPolygon.bindPopup(_this.$refs.GridMsg).openPopup(e.latlng)
                        } else {
                          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
                        }
                      })
                    })
                  })
                } else {
                  var areaPolygon = L.polygon(JSON.parse(item.company_scope_ht), { color: this.areaColor[index], smoothFactor: 0.5, opacity: 1, fillOpacity: 0.3, gridData: item }).addTo(this.areaPolygon).bringToBack()
                  let _this = this
                  areaPolygon.on('click ', function (e) {
                    let data = e.target.options.gridData
                    console.log(data)
                    newGetGridInfoByID(data).then(ret => {
                      if (ret.data.errcode === 0) {
                        _this.infoWindowObject = ret.data.data
                        console.log(_this.infoWindowObject)
                        areaPolygon.bindPopup(_this.$refs.GridMsg).openPopup(e.latlng)
                      } else {
                        this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
                      }
                    })
                  })
                }
              }
            })
          }
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    clickLabelModel () {
      this.$refs.labelInfo.init(this.infoWindowObject)
    },
    callBackMap (e) {
      this.$emit('callBackMap', e)
    },
    disposeForPlace (placeList) {
      try {
        this.map.removeLayer(this.placeMarker)
      } catch (e) {
        console.log(e)
      }
      if (placeList.length > 0) {
        this.placeMarker = L.layerGroup().setZIndex(1000).addTo(this.map)
        placeList.forEach(item => {
          item.TYPE = 'P'
          this.createMakerForPlace(item.csc_mapjson_ht, item, this.placeMarker)
        })
      }
    },
    disposeForSociety (societyList) {
      try {
        this.map.removeLayer(this.societyMarker)
      } catch (e) {
        console.log(e)
      }
      if (societyList.length > 0) {
        this.societyMarker = L.layerGroup().setZIndex(1000).addTo(this.map)
        societyList.forEach(item => {
          console.log(item)
          item.TYPE = 'S'
          this.createMakerForPlace(item.csc_mapjson_ht, item, this.societyMarker)
        })
      }
    },
    disposeForSubstance (substanceList) {
      try {
        this.map.removeLayer(this.substanceMarker)
      } catch (e) {
        console.log(e)
      }
      if (substanceList.length > 0) {
        this.substanceMarker = L.layerGroup().setZIndex(1000).addTo(this.map)
        substanceList.forEach(item => {
          item.TYPE = 'W'
          this.createMakerForPlace(item.csc_mapjson_ht, item, this.substanceMarker)
        })
      }
    },
    createMakerForPlace (latlng, item, Marker) {
      const greenIcon = L.icon({
        iconUrl: item.icon,
        iconSize: [10, 10]
      })
      let marker = L.marker([latlng.split(',')[0], latlng.split(',')[1]], { icon: greenIcon, placeItem: item }).addTo(Marker)
      let _this = this
      marker.on('click ', function (e) {
        let data = e.target.options.placeItem
        if (data.TYPE === 'P') {
          _this.placeModal.show = true
          _this.placeModal.info = data
          _this.placeModal.info.place_img_list = []
          _this.placeModal.info.place_img_list = data.place_img.split(',')
        }
        if (data.TYPE === 'S') {
          _this.societyModal.show = true
          _this.societyModal.info = data
          _this.societyModal.info.shzz_img_list = []
          _this.societyModal.info.shzz_img_list = data.shzz_img.split(',')
        }
        if (data.TYPE === 'W') {
          _this.substanceModal.show = true
          _this.substanceModal.info = data
          _this.substanceModal.info.wj_img_list = []
          _this.substanceModal.info.wj_img_list = data.wj_img.split(',')
        }
        // console.log(data)
      })
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    this.map && this.map.remove()
  },
  watch: {
    'infoWindowObject.id': function (newV, oldV) {
      if (newV !== oldV) {
        try {
          this.callBackMap(this.infoWindowObject)
        } catch (e) {
          // console.log('infoWindowObject.id', e)
        }
      }
    },
    'choiceInfo.id': function (newV, oldV) {
      if (newV !== oldV) {
        try {
          let _this = this
          setTimeout(function () {
            _this.showMapView()
          }, 1000)
        } catch (e) {
          // console.log('choiceInfo.id', e)
        }
      }
    },
    'typeCheckBox.length': {
      handler (newValue, oldValue) {
        if (newValue !== oldValue && this.choiceInfo.grade !== '2') {
          try {
            let _this = this
            setTimeout(function () {
              _this.showMapView()
            }, 1000)
          } catch (e) {
            // console.log('typeCheckBox.length', e)
          }
        }
      }
    },
    'placeList.length': {
      handler (newValue, oldValue) {
        this.disposeForPlace(this.placeList)
      }
    },
    'societyList.length': {
      handler (newValue, oldValue) {
        this.disposeForSociety(this.societyList)
      }
    },
    'substanceList.length': {
      handler (newValue, oldValue) {
        this.disposeForSubstance(this.substanceList)
      }
    },
    mapViewMode: function (val) {
      this.init()
    },
    yQmapViewMode: function (val) {
      let _this = this
      setTimeout(function () {
        _this.showMapView()
      }, 1000)
    }
    // zoom: function (val) {
    //   if (this.placeList.length > 0) {
    //     this.disposeForPlace()
    //   }
    // }
  }
}
</script>

<style scoped>
#HtMapZS {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 900px;
}
/deep/ .leaflet-top{
  top: 85%;
}
/deep/ .detail{
  text-indent:1em;
  font-size: 12px;
}
.GridInfoClass{
  min-width: 220px;
  width: auto;
}
.divtitleClass {
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
.divclass {
  margin-bottom: 10px;
}
</style>
